<template>
  <div v-if="show" class="dialog-mask">
    <div class="dialog-box">
      <div class="title-box">
        <div class="title">
          <category-title title="处理结果" title-sub="Processing results"/>
        </div>
        <div class="close-icon" @click="$emit('close')">
          <close-outlined/>
        </div>
      </div>
      <div class="form">
        <div class="tt1">
          事件编码
        </div>
        <div class="tf1">
          {{ props.data.name }}
        </div>
        <div class="tt2">
          告警类型
        </div>
        <div class="tf2">
          <span class="tag fill-red">
            {{ ["", "天台逗留", "晚归", "上网行为", "失联", "异常人员"][props.data.type] }}
          </span>
        </div>
        <div class="tt3">
          事件详情
        </div>
        <div class="tf3">
          {{ props.data.name }}
        </div>
        <div class="tt4">
          处理结果
        </div>
        <div class="tf4">
          <textarea v-model="cljg" placeholder="请输入本次事件的处理结果..."/>
        </div>
        <div class="tt5"/>
        <div class="tf5">
          <div class="btn-cancel" @click="$emit('close')">
            取 消
          </div>
          <div class="btn-confirm" @click="DialogEventSubmit">
            确 认
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {CloseOutlined} from "@ant-design/icons-vue";

import CategoryTitle from "../category-title/index.vue";
import {ref} from "@vue/reactivity";
import {watch} from "vue";

const cljg = ref("");
// eslint-disable-next-line no-undef
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: {}
  }
});
watch(() => props.show, () => {
  if (props.show) {
    cljg.value = props.data.cljg;
  }
});

// eslint-disable-next-line no-undef
const emit = defineEmits(["submit", "close"]);

const DialogEventSubmit = () => {
  if (cljg.value) {
    emit("submit", {
      cljg: cljg.value
    });
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
